<!-- 1 脚本 -->
<script lang="ts" setup name="ToDoList">
import ToDoItem from './ToDoItem.vue'
import { nanoid } from 'nanoid'


const input = ref('')
const toDoList = ref([
  { id: nanoid(), title: '标题Java1', done: false },
  { id: nanoid(), title: '标题Java2', done: false },
  { id: nanoid(), title: '标题Java3', done: false },
  { id: nanoid(), title: '标题Java4', done: true },
  { id: nanoid(), title: '标题Java5', done: true },
  { id: nanoid(), title: '标题Java6', done: true },
  { id: nanoid(), title: '标题Java7', done: true },
  { id: nanoid(), title: '标题Java8', done: true },
])

//待处理
const undoList = computed(() => {
  return toDoList.value.filter((item) => !item.done)
})

//已完成
const doneList = computed(() => {
  return toDoList.value.filter((item) => item.done)
})

//方法
function addTodolist() {
  toDoList.value.push({ id: nanoid(), title: input.value, done: false })

  //清空输入框
  input.value = ''
}

function dealDown(id: string) {
  console.log('在父元素修改数据:', id)

  toDoList.value.forEach((todoItem) => {
    if (todoItem.id == id) {
      todoItem.done = true
    }
  })
}
</script>

<!-- 2 模板 -->
<template>
  <!-- ToDoList 待办事项 -->
  代办事项
  <div class="container">
    <div class="title">ToDo List</div>
    <div class="input">
      <el-input type="text" v-model="input" style="width: 240px" />

      <el-button type="primary" circle @click="addTodolist">
        <el-icon>
          <Sunny />
        </el-icon>
      </el-button>
    </div>
    <div class="undo">
      <el-tag> 待执行</el-tag>
      <ToDoItem v-for="todoItem in undoList" v-bind="todoItem" :dealDown="dealDown" v-bind:key="todoItem.id"></ToDoItem>
    </div>
    <div class="done">
      <el-tag> 已完成</el-tag>
      <ToDoItem v-for="todoItem in doneList" v-bind="todoItem" :title="todoItem.title" v-bind:key="todoItem.id">
      </ToDoItem>
    </div>
  </div>
</template>

<!-- 3 样式 -->
<style scoped>
.container {
  border: solid 1px grey;
  min-height: 500px;
  box-shadow: 0 0 10px gray;
}

.title {
  font-size: 30px;
  font-weight: bolder;
  color: #2385d0;
}
</style>
